import React, { useContext } from 'react'
import { Table, Button, Divider, Popconfirm } from 'antd'
// import { EyeOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons'
import { hospitalAdminUserContext } from '../../../context'
import IconSvg from '@/components/IconSvg'
// import style from './style.module.less'
import { findNamesByIds } from '@/utils/index'

export default () => {
  const { cityBottomConfig, cityTopConfig, topConfigData, tableConfig } = useContext(hospitalAdminUserContext)

  const columns: any = [
    {
      title: '所属地区',
      dataIndex: 'regions',
      width: 240,
      align: 'center',
      render: (value: any) => <span>{findNamesByIds(topConfigData.topRegionSelectData, value).join('/')}</span>,
    },
    {
      title: '负责人姓名',
      dataIndex: 'username',
      width: 120,
      align: 'center',
    },
    {
      title: '联系电话',
      dataIndex: 'phone',
      width: 140,
      align: 'center',
    },
    {
      title: '登录次数',
      dataIndex: 'loginCount',
      width: 140,
      align: 'center',
      sorter: (a: any, b: any) => a.loginCount - b.loginCount,
    },
    {
      title: '上次登录时间',
      dataIndex: 'lastLoginDate',
      width: 240,
      align: 'center',
    },
    {
      title: '操作',
      dataIndex: 'actions',
      width: 228,
      align: 'center',
      fixed: 'right',
      render: (_: any, record: any) => (
        <div style={{ display: 'flex', justifyContent: 'space-around', alignItems: 'center' }}>
          <Button type='link' onClick={() => cityBottomConfig.cityLook(record)}>
            <IconSvg name='cityExamine' style={{ marginRight: 5 }} />
            查看
          </Button>
          <Divider type='vertical' />
          <Button type='link' onClick={() => cityBottomConfig.cityEdit(record)}>
            <IconSvg name='cityEdit' style={{ marginRight: 5 }} />
            编辑
          </Button>
          <Divider type='vertical' />
          <Button type='link' style={{ color: 'red' }}>
            <IconSvg name='cityDelete' style={{ marginRight: 5 }} />
            <Popconfirm
              onConfirm={() => {
                cityBottomConfig.cityDeleteData(record)
              }}
              title='确定删除吗？'
              okText='确定'
              cancelText='取消'
            >
              删除
            </Popconfirm>
          </Button>
        </div>
      ),
    },
  ]
  return (
    <div style={{ marginTop: 20 }}>
      <div>
        <Table
          rowKey='id'
          scroll={{ x: 'max-content', y: 'calc(100vh - 360px)' }}
          columns={columns}
          dataSource={tableConfig.tableData}
          pagination={{
            position: ['bottomRight'],
            total: cityTopConfig.paging.totalCount,
            onChange: (page: any, pageSize: any) => {
              cityTopConfig.changePagingUploadTable(page, pageSize)
            },
            showTotal: (total: number) =>
              `共 ${total} 条记录  第 ${cityTopConfig.paging.pageIndex} / ${Math.ceil(
                total / cityTopConfig.paging.pageSize,
              )}页`,
            current: cityTopConfig.paging.pageIndex,
            pageSize: cityTopConfig.paging.pageSize,
            showSizeChanger: true,
          }}
        />
      </div>
    </div>
  )
}
